// 1 导入react
import React from 'react'
import ReactDOM from 'react-dom'



// 引入css文件
import "./index.css"

//组件通讯的三种方式
// 父组件 ->子组件
// 子组件->父组件 
// 兄弟组件

//子组件传递数据给父组件
//思路: 利用回调函数,父组件提供回调,子组件调用,将要传递的数据作为回调函数的参数

// 父组件提供一个回调函数 (用于接收数据)
// 将该函数作为属性的值 传递给子组件


class Parent extends React.Component {

    state = {
        lastName: ""
    }

    // 提供回调函数 传递给子组件
    getChildMsg = (msg) => {
        console.log(msg)
        this.setState({
            lastName: msg
        })
    }

    render() {
        const { lastName } = this.state
        return (
            <div>
                接收子组件的数据:
                <br />
                {lastName}
                <Child getMeg={this.getChildMsg} />
            </div>
        )
    }
}


class Child extends React.Component {
    constructor(props) {
        super(props)
        console.log(props)
    }
    state = {
        data: 'child-data'
    }
    //子组件调用父组件的回调函数
    senMsgToParent = (e) => {
        this.props.getMeg(this.state.data)
    }

    render() {
        return (
            <div>
                <button onClick={this.senMsgToParent}>传递给父组件数据:</button>
            </div>
        )
    }
}


//3 渲染react元素
ReactDOM.render(<Parent
    tag={<p>这是段落</p>}
    fn={() => console.log("这是一个函数")}
    colors={['red', 'blue', 'greens']}
    name='jack'
    age={12} />,
    document.getElementById('root'))
